<template>
	<view class="user-list">
		<block v-for="(item, index) in userList" :key="item.userID">
			<view class="user-info" @click="toChat(item)">
				<image class="avatar" :src="item.avatar"></image>
				<view class="user-name">
					<text class="name">{{item.username}}</text>
					<text class="last-message"><text>{{item.message}}</text>{{item.pulish_time}}</text>
				</view>
				<view class="right-info">
					<view class="fadeEle" v-if="item.unread_num == 0"></view>
					<view class="unread-num" v-if="item.unread_num > 0"><text>{{item.unread_num}}</text></view>
					<view class="send-time">{{item.send_time}}</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			userList: {
				type: Array,
				default: []
			}
		},
		methods: {
			toChat(item) {
				console.log('id',item)
				uni.navigateTo({
					url: "/pages/components/chatDialogBox/chatDialogBox?item=" + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-list .user-info {
		display: flex;
		align-items: center;
		height: 60px;
		background-color: #fff;
		margin-bottom: 1px;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	
	.user-list .user-info .avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	
	.user-list .user-name {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 40px;
		margin-left: 8px;
	}
	
	.user-info .user-name .name {
		font-size: 14px;
		color: #323232;
	}
	
	.user-info .user-name .last-message {
		font-size: 12px;
		color: #b6b6b6;
	}
	
	.user-list .right-info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-evenly;
		height: 100%;
		margin-left: auto;
		padding-right: 20rpx;
	}
	
	.user-list .right-info .unread-num {
		height: 18px;
		width: 18px;
		color: #fff;
		font-size: 10px;
		text-align: center;
		line-height: 18px;
		border-radius: 50%;
		background-color: #ff5218;
	}
	
	.user-list .right-info .send-time {
		font-size: 12px;
		color: #a5a6a8;
	}
	
</style>